<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container{
      width: 480px;
      height: 270px;
      margin: 150px auto;
      position: relative;
      overflow: hidden;
    }

    .container img{
      position: absolute;
      /* 所有的样式变换时, 都是有过渡效果的, 而且时间间隔是 0.5s */
      transition: all 0.5s;
      left: 0;
      top: 0;
      transform: rotate(0deg);
    }

    .container .next, .container .prev{
      position: absolute;
      width: 60px;
      height: 60px;
      background: rgba(255, 255,255,0.8);
      top: 105px;
      border-radius: 50%;
      text-align: center;
      line-height: 60px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      user-select: none;
    }

    .container .next{
      right: 0;
    }

    body{
      background: radial-gradient(#fef, #38c);
      /* 1vw 等于视口宽度的 1% */
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* 定义一个类名, 样式为隐藏 透明图为0 */
    .container .hidden{
      /* opacity: 0; */
      /* left: 480px; */
      top: 270px;
      /* left: -480px; */
      transform: rotate(360deg);
    }

    ul{
      list-style: none;
      position: absolute;
      bottom: 20px;
      left: 20px;
    }
    ul li{
      width: 12px;
      height: 12px;
      background: #eee2e2;
      float: left;
      margin-right: 10px;
      border-radius: 50%;
    }
    ul li.active{
      background: #c92525;
    }
  </style>
</head>
<body>
  <div class="container">
    <img width="100%" src="./images/1.jpg" alt="">
    <img class="hidden" width="100%" src="./images/2.jpg" alt="">
    <img class="hidden" width="100%" src="./images/3.jpg" alt="">
    <img class="hidden" width="100%" src="./images/4.jpg" alt="">
    <img class="hidden" width="100%" src="./images/5.jpg" alt="">

    <ul>
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

    <div class="next">&gt;</div>
    <div class="prev">&lt;</div>
  </div>

  <script>
    //获取 container 容器元素
    let container = document.querySelector('.container');
    //获取上一个和下一个的按钮
    let next = document.querySelector('.next');
    let prev = document.querySelector('.prev');
    //获取所有的图片
    let images = document.querySelectorAll('img');
    //获取所有的小圆点元素
    let dots = document.querySelectorAll('li');
    //当前显示图片的下标   游标
    let index = 0;
    //声明 timer 变量
    let timer;

    //绑定事件
    next.onclick = function(){
      //使 index 自增
      index++;
      //添加边界检测
      if(index > images.length -1){
        index = 0;
      }
      showSlide(index);
    }

    //点击上一个的按钮事件
    prev.onclick = function(){
      //使 index 变量自减
      index--;
      //边界检测
      if(index < 0){
        index = images.length - 1;
      }
      showSlide(index);
    }

    //为 container 元素绑定 onmouseover 事件
    container.onmouseover = function(){
      //停止定时器
      clearInterval(timer);
    }

    //为 container 元素绑定 mouseout 事件
    container.onmouseout = function(){
      autoRun();
    }

    //为每一个小圆点绑定鼠标移入事件
    for(let i=0;i<dots.length;i++){
      dots[i].onmouseover = function(){
        //切换显示的图片下标
        showSlide(i);
      }
    }

    //封装函数, 自动运行
    function autoRun(){
      //启动定时器
      timer = setInterval(() => {
        //下标 index 自增
        index++;
        //判断是否越界
        if(index > images.length - 1){
          index = 0;
        }
        //切换图片显示
        showSlide(index);
      }, 2000);
    }
    autoRun();

    //封装一个函数 显示指定下标的图片   标识符要尽量做到见名思义
    function showSlide(ind){
      //将所有的图片都隐藏
      for(let i=0;i<images.length;i++){
        //修改类名
        images[i].className = 'hidden';
      }

      //将指定 index 的图片显示出来, 移除原来的 hidden 类名
      images[ind].className = '';

      //所有的店都变成灰色
      for(let i=0;i<dots.length;i++){
        dots[i].className = '';
      }
      //将当前index对应的小圆点变成红色
      dots[ind].className = 'active';
    }

  </script>
</body>
</html>